<template>
  <tbody>
    <template v-if="data && data.length">
      <tr v-for="(row,index) in data" :key="index"  
        @mouseenter.stop="trHover({index,value:true})"
        @mouseleave.stop="trHover({index,value:false})"
        class="cell-check" :class="{'hover':rows[index] && rows[index].hover}"
        :stype="trStyle(index)">
        <td v-if="option.enableCheck" @click="checkToggle(index)">
          <Checkbox :value="rows[index] && rows[index].check"></Checkbox>
        </td>
        <td v-for="field in listFields" :key="field.code">
          <span v-html="cellText(index,field)"></span>
        </td>
      </tr>
    </template>
    <tr  v-else class="tr-empty">
      <td :colspan="listFields.length+(option.enableCheck?1:0)">暂无数据</td>
    </tr>
  </tbody>
</template>

<script>
import TableParticle from "./tableParticle";
import Render from "./render";
export default {
  extends: TableParticle,

  subModuleStore: true,
  data() {
    return {};
  },
  computed: {
    renderData() {
      //使用生成的渲染器生成渲染数据
      let data = [];
      for (let row of this.data) {
        data.push(this.formatRender(row));
      }
      return data;
    },
    formatRender() {
      return Render.format(this.fields);
    }
  },
  methods: {
    cellText(index, field) {
      if (
        this.renderData[index] &&
        this.renderData[index][field.code] !== undefined
      ) {
        this.renderData[index][field.code];
      } else {
        return this.data[index][field.code];
      }
    },
    trStyle(index) {
      var style = {};
      if (this.$parent.trHeight[index]) {
        style.height = this.$parent.trHeight[index] + "px";
      }
      return style;
    }
  },
  created() {},
  components: {
    //customField 可充当统一的自定有组件字段
  }
};
</script>

<style>

</style>
